<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="用户名" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="密码" prop="pwd">
      <el-input type="password" v-model="ruleForm.pwd" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>
  
  <script setup>
import { reactive, ref } from "vue";
import {useRouter} from "vue-router"
import {LoginAjax} from "../api/user";
import { ElMessage } from 'element-plus'
import md5 from "md5"
const router=useRouter();

const formSize = ref("default");
const ruleFormRef = ref("");
const ruleForm = reactive({
  name: "newbee-admin1",
  pwd: "123456",
});

const rules = reactive({
  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {// 如果用户名和密码有值
       let result=await LoginAjax({
          name:ruleForm.name,
          pwd:md5(ruleForm.pwd)
       })
       if(result.resultCode===200){
        ElMessage({
          message: '登录成功',
          type: 'success',
        })
         sessionStorage.setItem("token",result.data);
           router.push("/index")
       }
       console.log(result);
   
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
  